<template>
  <div class="mvs-container">
    <div class="filter-wrap">
      <div class="seciton-wrap">
        <span class="section-type">地区:</span>
        <ul class="tabs-wrap">
          <li class="tab">
            <span class="title" @click="tit = '全部'" :class="{active: tit == '全部'}">全部</span>
          </li>
          <li class="tab">
            <span class="title" @click="tit = '内地'" :class="{active: tit == '内地'}">内地</span>
          </li>
          <li class="tab">
            <span class="title" @click="tit = '港台'" :class="{active: tit == '港台'}">港台</span>
          </li>
          <li class="tab">
            <span class="title" @click="tit = '欧美'" :class="{active: tit == '欧美'}">欧美</span>
          </li>
          <li class="tab">
            <span class="title" @click="tit = '日本'" :class="{active: tit == '日本'}">日本</span>
          </li>
          <li class="tab">
            <span class="title" @click="tit = '韩国'" :class="{active: tit == '韩国'}">韩国</span>
          </li>
        </ul>
      </div>
      <div class="type-wrap">
        <span class="type-type">类型:</span>
        <ul class="tabs-wrap">
          <li class="tab">
            <span class="title" @click="type = '全部'" :class="{active:type == '全部'}">全部</span>
          </li>
          <li class="tab">
            <span class="title" @click="type = '官方版'" :class="{active:type == '官方版'}">官方版</span>
          </li>
          <li class="tab">
            <span class="title" @click="type = '原生'" :class="{active:type == '原生'}">原声</span>
          </li>
          <li class="tab">
            <span class="title" @click="type = '现场版'" :class="{active:type == '现场版'}">现场版</span>
          </li>
          <li class="tab">
            <span class="title" @click="type = '网易出品'" :class="{active:type == '网易出品'}">网易出品</span>
          </li>
        </ul>
      </div>
      <div class="order-wrap">
        <span class="order-type">排序:</span>
        <ul class="tabs-wrap">
          <li class="tab">
            <span :class="['title',  order == '上升最快' ? 'active' : '']" @click="order = '上升最快'">上升最快</span>
          </li>
          <li class="tab">
            <span :class="['title',  order == '最热' ? 'active' : '']" @click="order = '最热'">最热</span>
          </li>
          <li class="tab">
            <span :class="['title',  order == '最新' ? 'active' : '']" @click="order = '最新'">最新</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- mv容器 -->
    <!-- 推荐MV -->
    <div class="mvs">
      <div class="items">
        <div class="item" 
        v-for="item in MVList"
        :key="item.id"
        @click="toMv(item.id)">
          <div class="img-wrap">
            <img :src="item.cover" alt="" />
            <div class="num-wrap">
              <div class="iconfont icon-play"></div>
              <div class="num">{{item.playCount | playNumFormat}}</div>
            </div>
          </div>
          <div class="info-wrap">
            <div class="name">{{item.name}}</div>
            <div class="singer">{{item.artistName}}</div>
          </div>
        </div>
      </div>
      <!-- 分页器 -->
      <el-pagination
        @current-change="handleCurrentChange"
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="page"
        :page-size="5"
        :limit="limit"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { MV } from '../network/request'
export default {
  name: 'mvs',
  data() {
    return {
      // 总条数
      total: 20,
      // 页码
      page: 1,
      // 页容量
      limit: 8,

      MVList: [],
      tit: '全部',
      type:'全部',
      order: '上升最快'
    };
  },
  watch: {
    tit() {
      this.page = 1;
      this.mvList()
    },
    type() {
      this.page = 1;
      this.mvList()
    },
    order() {
      this.page = 1;
      this.mvList()
    }
  },
  created() {
    this.mvList()
  },
  methods: {
    async mvList() {
      const res = await MV(this.tit, this.type, this.order, this.limit, (this.page - 1) * this.limit);
      console.log(res)
      this.MVList = res.data;
      if(res.count) {
        this.total = res.count;
      } 
    },
    toMv(id) {
      this.$router.push(`/mv?id=${id}`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val
      this.mvList()
    }
  }
};
</script>

<style >

</style>
